<template>
  <div class="page-header-index-wide">

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <j-dict-select-tag type="radioButton" v-model="dateTypeVal.member" dictCode="vueDateType" :trigger-change="true"
                               @change="(e)=> handleDateTypeChange(methodType.member, e) " style="margin-right: 20px;"/>
            <a-date-picker v-if="dateTypeVal.member === 'day'" :showToday="false" :style="{width: '156px'}"
                           @change="(date,dateString)=>{
                             requestInfo(methodType.member, dateString);
                           }"/>
            <a-month-picker v-if="dateTypeVal.member === 'month'" placeholder="请选择月份" :style="{width: '156px'}"
                            @change="(date,dateString)=>{
                             requestInfo(methodType.member, dateString);
                           }"/>
          </div>
          <a-tab-pane loading="true" tab="用户整体概况" key="1">
            <a-row>
              <a-col v-for="(item, index) in memberInfo" :span="3" style="margin-left: 20px;">
                <chart-card :bordered="true" :footer="false" :loading="loading" :title="item.title" :total="item.today">
                  <a-tooltip :title="item.tips" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                  <div v-if="item.percentage">
                    <trend style="margin-right: 16px;" v-if="item.percentage == 0">
                      <span slot="term">较前一{{ dateTypeVal.member === 'month' ? '月' : '日' }}</span>
                      -
                    </trend>
                    <trend flag="up" style="margin-right: 16px;" v-else-if="item.percentage >= 0">
                      <span slot="term">较前一{{ dateTypeVal.member === 'month' ? '月' : '日' }}</span>
                      {{ item.percentage }}%
                    </trend>
                    <trend flag="down" style="margin-right: 16px;" v-else>
                      <span slot="term">较前一{{ dateTypeVal.member === 'month' ? '月' : '日' }}</span>
                      {{ Math.abs(item.percentage) }}%
                    </trend>
                  </div>
                </chart-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <j-dict-select-tag type="radioButton" v-model="dateTypeVal.commission" dictCode="vueDateType" :trigger-change="true"
                               @change="(e)=> handleDateTypeChange(methodType.commission, e) " style="margin-right: 20px;"/>
            <a-date-picker v-if="dateTypeVal.commission === 'day'" :showToday="false" :style="{width: '156px'}"
                           @change="(date,dateString)=>{
                             requestInfo(methodType.commission, dateString);
                           }"/>
            <a-month-picker v-if="dateTypeVal.commission === 'month'" placeholder="请选择月份" :style="{width: '156px'}"
                            @change="(date,dateString)=>{
                             requestInfo(methodType.commission, dateString);
                           }"/>
          </div>
          <a-tab-pane loading="true" tab="佣金统计" key="1">
            <a-row>
              <a-col v-for="(item, index) in commissionInfo" :span="4" style="margin-left: 20px;">
                <chart-card :bordered="true" :footer="false" :loading="loading" :title="item.title" :total="item.total">
                  <a-tooltip :title="item.tips" slot="action">
                    <a-icon type="info-circle-o" />
                  </a-tooltip>
                </chart-card>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changeDate(methodType.commission, dateType.today, null, null)">今日实时</a>
              <a @click="changeDate(methodType.commission, dateType.week, null, null)">近7天</a>
              <a @click="changeDate(methodType.commission, dateType.month, null, null)">近30天</a>
              <a @click="changeDate(methodType.commission, dateType.total, null, null)">总计</a>
            </div>
            <a-range-picker :style="{width: '256px'}" @change="(range)=>{
                             customDateChoice(methodType.commission, range);
                           }"/>
          </div>
          <a-tab-pane loading="true" tab="增长情况" key="1">
            <a-row>
              <a-col>
                <line-chart-multid-date :fields="commissionFields" :dataSource="commissionStatistics"></line-chart-multid-date>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>

    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <div class="extra-wrapper" slot="tabBarExtraContent">
            <div class="extra-item">
              <a @click="changeDate(methodType.member, dateType.today, null, null)">今日实时</a>
              <a @click="changeDate(methodType.member, dateType.week, null, null)">近7天</a>
              <a @click="changeDate(methodType.member, dateType.month, null, null)">近30天</a>
              <a @click="changeDate(methodType.member, dateType.total, null, null)">总计</a>
            </div>
            <a-range-picker :style="{width: '256px'}" @change="(range)=>{
                             customDateChoice(methodType.member, range);
                           }"/>
          </div>
          <a-tab-pane loading="true" tab="用户成交趋势" key="1">
            <a-row>
              <a-col>
                <line-chart-multid :fields="memberFields" :dataSource="statistics"></line-chart-multid>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>


  </div>
</template>

<script>
import ChartCard from '@/components/ChartCard'
import ACol from "ant-design-vue/es/grid/Col"
import ATooltip from "ant-design-vue/es/tooltip/Tooltip"
import MiniArea from '@/components/chart/MiniArea'
import MiniBar from '@/components/chart/MiniBar'
import MiniProgress from '@/components/chart/MiniProgress'
import Bar from '@/components/chart/Bar'
import LineChartMultid from '@/components/chart/LineChartMultid'
import LineChartMultidDate from '@/components/chart/LineChartMultidDate'
import HeadInfo from '@/components/tools/HeadInfo.vue'

import Trend from '@/components/Trend'
import {getAction, httpAction} from '@/api/manage'

export default {
  name: "IndexChart",
  components: {
    ATooltip,
    ACol,
    ChartCard,
    MiniArea,
    MiniBar,
    MiniProgress,
    Bar,
    Trend,
    LineChartMultid,
    LineChartMultidDate,
    HeadInfo
  },
  data() {
    return {
      loading: true,
      center: null,
      statistics: [],
      commissionStatistics: [],
      memberInfo: [],
      commissionInfo: [],
      dateType: {total: 0, yesterday: 1, today: 2, week: 3, month: 4, custom: 5},
      dateTypeVal: {member: 'total', commission: 'total'},
      methodType: {member: 'member', commission: 'commission'},
      memberFields: ['成交客户数'],
      commissionFields: ['新增用户', '新增分销员'],
    }
  },
  created() {
    setTimeout(() => {
      this.loading = !this.loading
    }, 1000)
    this.initLogInfo();
  },
  methods: {
    initLogInfo() {
      this.requestInfo(this.methodType.member, null);
      this.requestInfo(this.methodType.commission, null);
      this.requestStatistics(this.dateType.week, null, null);
      this.requestCommissionStatistics(this.dateType.week, null, null);
    },
    customDateChoice(method, range) {
      this.changeDate(method, this.dateType.custom, range[0].format('YYYY-MM-DD'), range[1].format('YYYY-MM-DD'));
    },
    changeDate(method, type, start, end) {
      if(method === this.methodType.member) {
        this.requestStatistics(type, start, end)
      } else if(method === this.methodType.commission) {
        this.requestCommissionStatistics(type, start, end)
      }
    },
    requestStatistics(type, start, end) {
      getAction("/statistics/memberStatistics", {type: type, dayStart: start, dayEnd: end}).then(res => {
        if (res.success) {
          this.statistics = res.result.lineData
        }
      })
    },
    requestCommissionStatistics(type, start, end) {
      getAction("/statistics/memberIncreaseStatistics", {type: type, dayStart: start, dayEnd: end}).then(res => {
        if (res.success) {
          this.commissionStatistics = res.result.lineData
        }
      })
    },
    handleDateTypeChange(method, e) {
      let type = e.target.value;
      let isMember = method === this.methodType.member;
      if(isMember) {
        this.dateTypeVal.member = type;
      } else {
        this.dateTypeVal.commission = type;
      }
      if (type === 'total' || type === 'today') {
        this.requestInfo(method, null);
      }
    },
    requestInfo(method, dateString) {
      let isMember = method === this.methodType.member;
      getAction("/statistics/" + (isMember ? "memberInfo" : "commissionInfo"),
        {type: isMember ? this.dateTypeVal.member : this.dateTypeVal.commission, dateString: dateString}).then(res => {
        if (res.success) {
          if(isMember){
            this.memberInfo = res.result
          } else {
            this.commissionInfo = res.result
          }
        }
      })
    },
  }
}
</script>

<style lang="less" scoped>
.extra-wrapper {
  line-height: 55px;
  padding-right: 24px;

  .extra-item {
    display: inline-block;
    margin-right: 24px;

    a {
      margin-left: 24px;
    }
  }
}

</style>